<template>
    <ExtForm ref="ExtForm" :formfields="formfields" @changeEventHandler="changeEventHandler"></ExtForm>
</template>
<script>

import defaultSettings from '@/config/defaultSettings'
import pageSetting from '@/components/lt/codeGenerator/pageSetting'
import Vue from 'vue'
import ExtForm from '@/components/lt/codeGenerator/components/ExtForm'
import {StringToJson,isJSON} from '@/utils/util'
export default {
    name:'LineCharAttribute',
    components:{ExtForm},
    props:{
        component:{
           type:Object,
           default:()=>{}
        },
    },
    watch:{
        
    },
    data(){
        return{
            defaultSettings,
            formfields:[
                {field:'label',label:'标题',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.label,rules: [{ required: true, message: '不能为空!' }]},
                {field:'ref',label:'ref',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.ref,disabled:true},
                {field:'height',label:'高度',component:pageSetting.常量.表单组件类型.数字输入框,initialValue:this.component.props.height},
                {field:'xAxisData',label:'X轴数据变量名',initialValue:this.component.props.xAxisData,component:pageSetting.常量.表单组件类型.单行文本,rules: [{ required: true, message: '不能为空!' }]},
                {field:'series',label:'图表数据变量名',initialValue:this.component.props.series,component:pageSetting.常量.表单组件类型.单行文本,rules: [{ required: true, message: '不能为空!' }]},

                {field:'option_title_show',label:'是否显示标题',initialValue:this.component.props.option.title.show || false,component:pageSetting.常量.表单组件类型.开关,checkedChildren:true,unCheckedChildren:false,rules: [{ required: false, message: '不能为空!' }]},
                {field:'option_title_text',label:'标题内容',initialValue:this.component.props.option.title.text || '',component:pageSetting.常量.表单组件类型.单行文本,rules: [{ required: false, message: '不能为空!' }]},
                {field:'option_title_textStyle_color',label:'标题字体颜色',initialValue:this.component.props.option.title.textStyle.color || '#333',component:pageSetting.常量.表单组件类型.单行文本,rules: [{ required: false, message: '不能为空!' }]},
                {field:'option_title_textStyle_fontStyle',label:'标题字体风格',initialValue:this.component.props.option.title.textStyle.fontStyle || 'normal',component:pageSetting.常量.表单组件类型.单行文本,rules: [{ required: false, message: '不能为空!' }]},
                {field:'option_title_textStyle_fontWeight',label:'标题字体粗细',initialValue:this.component.props.option.title.textStyle.fontWeight || 'normal',component:pageSetting.常量.表单组件类型.单行文本,rules: [{ required: false, message: '不能为空!' }]},
                {field:'option_title_textStyle_fontSize',label:'标题字体大小',initialValue:this.component.props.option.title.textStyle.fontSize || 18,component:pageSetting.常量.表单组件类型.数字输入框,rules: [{ required: false, message: '不能为空!' }]},


                {field:'option_tooltip_show',label:'提示框是否显示',initialValue:this.component.props.option.tooltip.show,component:pageSetting.常量.表单组件类型.开关,checkedChildren:true,unCheckedChildren:false,rules: [{ required: true, message: '不能为空!' }]},
                {field:'option_tooltip_axisPointer_type',label:'提示框指示器类型',initialValue:this.component.props.option.tooltip.axisPointer.type || 'shadow',component:pageSetting.常量.表单组件类型.下拉选择,rules: [{ required: true, message: '不能为空!' }],options:pageSetting.数据字典.图表提示框指示器类型},
                {field:'option_grid_show',label:'是否显示坐标系网格',initialValue:this.component.props.option.grid.show,component:pageSetting.常量.表单组件类型.开关,checkedChildren:true,unCheckedChildren:false,rules: [{ required: true, message: '不能为空!' }]},
                {field:'option_grid_borderColor',label:'网格线颜色',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.props.option.grid.borderColor},
                {field:'option_grid_borderWidth',label:'网格线宽度',component:pageSetting.常量.表单组件类型.数字输入框,initialValue:this.component.props.option.grid.borderWidth},
                {field:'option_grid_left',label:'图表距左侧距离(百分比)',component:pageSetting.常量.表单组件类型.数字输入框,initialValue:this.component.props.option.grid.left,rules: [{ required: true, message: '不能为空!' }]},
                {field:'option_grid_right',label:'图表距右侧距离(百分比)',component:pageSetting.常量.表单组件类型.数字输入框,initialValue:this.component.props.option.grid.right,rules: [{ required: true, message: '不能为空!' }]},
                {field:'option_grid_top',label:'图表距顶部距离(百分比)',component:pageSetting.常量.表单组件类型.数字输入框,initialValue:this.component.props.option.grid.top,rules: [{ required: true, message: '不能为空!' }]},
                {field:'option_grid_bottom',label:'图表距底部距离(百分比)',component:pageSetting.常量.表单组件类型.数字输入框,initialValue:this.component.props.option.grid.bottom,rules: [{ required: true, message: '不能为空!' }]},
            
                {field:'option_xAxis_axisLine_lineStyle_color',label:'X轴字体颜色',initialValue:this.component.props.option.xAxis.axisLine.lineStyle.color || '#333',component:pageSetting.常量.表单组件类型.单行文本,rules: [{ required: false, message: '不能为空!' }]},
                {field:'option_yAxis_axisLine_lineStyle_color',label:'Y轴字体颜色',initialValue:this.component.props.option.yAxis.axisLine.lineStyle.color || '#333',component:pageSetting.常量.表单组件类型.单行文本,rules: [{ required: false, message: '不能为空!' }]},
            
                {field:'option_legend_show',label:'是否显示图例',initialValue:this.component.props.option.legend.show,component:pageSetting.常量.表单组件类型.开关,checkedChildren:true,unCheckedChildren:false,rules: [{ required: false, message: '不能为空!' }]},
                {field:'option_legend_left',label:'图例距左侧距离(百分比)',component:pageSetting.常量.表单组件类型.数字输入框,initialValue:this.component.props.option.legend.left,rules: [{ required: false, message: '不能为空!' }]},
                {field:'option_legend_right',label:'图例距右侧距离(百分比)',component:pageSetting.常量.表单组件类型.数字输入框,initialValue:this.component.props.option.legend.right,rules: [{ required: false, message: '不能为空!' }]},
                {field:'option_legend_top',label:'图例距顶部距离(百分比)',component:pageSetting.常量.表单组件类型.数字输入框,initialValue:this.component.props.option.legend.top,rules: [{ required: false, message: '不能为空!' }]},
                {field:'option_legend_bottom',label:'图例距底部距离(百分比)',component:pageSetting.常量.表单组件类型.数字输入框,initialValue:this.component.props.option.legend.bottom,rules: [{ required: false, message: '不能为空!' }]},
            ] 
        }
    },
   
    created(){
        // console.log(this.component)
    },
    methods:{
        changeEventHandler(item){
            if(item["label"]){
                this.component.label=item.label
                for(let i=0;i<this.component.components.length;i++){
                    if(this.component.components[i].type==pageSetting.常量.组件.标题){
                        this.component.components[i].label=item.label
                    }
                }
            }else{
                for (const key in item) {
                    if(key.indexOf("option_")>-1){
                        let keyArr = key.split("_")
                        let p = this.component.props
                        for(let i=0;i<keyArr.length-1;i++){
                            p = p[keyArr[i]]
                        }
                        Vue.set(p,keyArr[keyArr.length-1],item[key])
                    }else{
                        Vue.set(this.component.props,key,item[key])
                    }
                    /*
                    if("option_title_show"==key){
                        Vue.set(this.component.props.option.title,'show',item[key])
                    }else if("option_title_text"==key){
                        Vue.set(this.component.props.option.title,'text',item[key])
                    }else if("option_title_textStyle_color"==key){
                        Vue.set(this.component.props.option.title.textStyle,'color',item[key])
                    }else if("option_title_textStyle_fontStyle"==key){
                        Vue.set(this.component.props.option.title.textStyle,'fontStyle',item[key])
                    }else if("option_title_textStyle_fontWeight"==key){
                        Vue.set(this.component.props.option.title.textStyle,'fontWeight',item[key])
                    }else if("option_title_textStyle_fontSize"==key){
                        Vue.set(this.component.props.option.title.textStyle,'fontSize',item[key])
                    }else if("option_tooltip_show"==key){
                        Vue.set(this.component.props.option.tooltip,'show',item[key])
                    }else if("option_tooltip_axisPointer_type"==key){
                        Vue.set(this.component.props.option.tooltip.axisPointer,'type',item[key])
                    }else if("option_grid_show"==key){
                        Vue.set(this.component.props.option.grid,'show',item[key])
                    }else if("option_grid_borderColor"==key){
                        Vue.set(this.component.props.option.grid,'borderColor',item[key])
                    }else if("option_grid_borderWidth"==key){
                        Vue.set(this.component.props.option.grid,'borderWidth',item[key])
                    }else if("option_grid_left"==key){
                        Vue.set(this.component.props.option.grid,'left',item[key])
                    }else if("option_grid_right"==key){
                        Vue.set(this.component.props.option.grid,'right',item[key])
                    }else if("option_grid_top"==key){
                        Vue.set(this.component.props.option.grid,'top',item[key])
                    }else if("option_grid_bottom"==key){
                        Vue.set(this.component.props.option.grid,'bottom',item[key])
                    }else if("option_xAxis_axisLine_lineStyle_color"==key){
                        Vue.set(this.component.props.option.xAxis.axisLine.lineStyle,'color',item[key])
                    }else if("option_yAxis_axisLine_lineStyle_color"==key){
                        Vue.set(this.component.props.option.yAxis.axisLine.lineStyle,'color',item[key])
                    }else if("option_series_label_show"==key){
                        Vue.set(this.component.props.option.series.label,'show',item[key])
                    }else if("option_series_label_textStyle_color"==key){
                        Vue.set(this.component.props.option.series.label.textStyle,'color',item[key])
                    }else if("option_series_itemStyle_color"==key){
                        Vue.set(this.component.props.option.series.itemStyle,'color',item[key])
                    }else if("option_series_itemStyle_borderColor"==key){
                        Vue.set(this.component.props.option.series.itemStyle,'borderColor',item[key])
                    }else if("option_series_itemStyle_borderWidth"==key){
                        Vue.set(this.component.props.option.series.itemStyle,'borderWidth',item[key])
                    }else{
                        Vue.set(this.component.props,key,item[key])
                    }
                    */
                    
                }
            }

        }
    }
}
</script>